﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- own -->
<link rel="stylesheet" href="../css/app.css">
<link rel="stylesheet" href="../css/baiduTimeLine.css">
<script src="../js/navicateBar.js"></script>
<title>杜易初|Young Rhythm</title>
</head>
<body>
	<div class="container">
<nav class="navbar navbar-default myOpcity">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed "
					data-toggle="collapse" data-target="#myNavbarCollapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">易初|yichu</a>
			</div>
			<div class="collapse navbar-collapse" id="myNavbarCollapse">
				<ul id="navBarID" class="nav navbar-nav navbar-right">
					<li id="gaoKaoID"><a href="../views/index.html">高考 <!-- 小的下三角 --> <b
							class="caret"></b>
					</a>
						<ul class="dropdown-menu" id="gaoKaoChildID">
							<li><a href="../views/index.html">高考倒计时</a></li>
							<li><a href="../ngViews/gaoKaoScore.html">高考成绩</a></li>
						</ul></li>
					<li><a href="../views/picture.html">图片</a></li>
					<li><a href="../views/inDHU.html">我在东华</a></li>
					<li><a href="../views/cooking.html">做饭</a></li>
					<li><a href="../views/location.html">位置</a></li>
					<li><a href="../ngViews/visit.html">访问统计</a></li>
					<li><a href="../views/logo.html" target="_blank">logo筹备</a></li>
				</ul>
			</div>
		</div>
	</nav>
	</div>
	<div id="sideCatalog" class="sideCatalogBg"
		style="visibility: visible; position: fixed">
		<div id="sideCatalog-sidebar">
			<div class="sideCatalog-sidebar-top"></div>
			<div class="sideCatalog-sidebar-bottom"></div>
		</div>
		<div id="sideCatalog-catalog">
			<dl style="width: 175px; zoom: 1">
				<dd class="sideCatalog-item1 highlight" id="sideToolbar-item-0-0">
					<a href="#grade1">大一</a><span class="sideCatalog-dot"></span>
				</dd>
				<dd class="sideCatalog-item1" id="sideToolbar-item-0-1">
					<a href="#grade2">大二</a><span class="sideCatalog-dot"></span>
				</dd>
				<dd class="sideCatalog-item1 " id="sideToolbar-item-0-2">
					<a href="#grade3">大三</a><span class="sideCatalog-dot"></span>
				</dd>
				<dd class="sideCatalog-item1" id="sideToolbar-item-0-3">
					<a href="#grade4">大四</a><span class="sideCatalog-dot"></span>
				</dd>
			</dl>
		</div>
	</div>
	<div class="container">
		<div id="grade1" style="height: 100%">
			<p>1</p>
			如果你不再出现<br /> 我的世界还有什么可贵<br /> 可惜不够时间<br /> 让我们试验什么叫永远<br />
			想念变成怀念<br /> 心动变成心碎<br /> 偏偏还会关切<br /> 你最后属于谁<br /> 我的天空今天有点灰<br />
			我的心是个落叶的季节<br /> 我不知道如何度过今夜<br /> 所有的灯早已经全都熄灭<br /> <br />
			如果你从没出现<br /> 我会不会 觉得快乐一些<br /> 可惜残忍时间<br /> 总要把诺言 一点点摧毁<br />
			想念变成怀念<br /> 心动变成心碎<br /> 偏偏还会关切<br /> 你最后属于谁<br /> 我的天空今天有点灰<br />
			我的心是个落叶的季节<br /> 我不知道如何度过今夜<br /> 所有的灯 早已经全都熄灭
		</div>
		<div id="grade2" style="height: 100%">
			<p>2</p>
			是有过几个不错对象<br /> 说起来并不寂寞孤单<br /> 可能我浪荡 让人家不安<br /> 才会 结果都阵亡<br /> <br />
			我没有什麽阴影魔障<br /> 你千万不要放在心上<br /> 我又不脆弱 何况那算什麽伤<br /> 反正爱情不就都这样<br /> <br />
			我没有说谎 我何必说谎<br /> 你懂我的 我对你从来就不会假装<br /> 我哪有说谎 请别以为你有多难忘<br />
			笑是真的不是我逞强<br /> <br /> 我好久没来这间餐厅<br /> 没想到已经换了装潢<br /> 角落那窗口 闻得到玫瑰花香<br />
			被你一说是有些印象<br /> <br /> 我没有说谎 我何必说谎<br /> 你知道的 我缺点之一就是很健忘<br /> 我哪有说谎
			是很感谢今晚的相伴<br /> 但我竟然有些不习惯<br /> <br /> 我没有说谎 我何必说谎<br /> 爱一个人
			没爱到难道就会怎麽样<br /> 别说我说谎 人生已经如此的艰难<br /> 有些事情就不要拆穿<br /> <br /> 我没有说谎
			是爱情说谎<br /> 它带你来 骗我说 渴望的有可能有希望<br /> 我没有说谎 祝你做个幸福的新娘<br /> 我的心事请你就遗忘<br />
		</div>
		<div id="grade3" style="height: 100%">
			<p>3</p>
			夜空中最亮的星 能否听清<br /> 那仰望的人 心底的孤独和叹息<br /> 夜空中最亮的星 能否记起<br /> 曾与我同行
			消失在风里的身影<br /> <br /> 我祈祷拥有一颗透明的心灵<br /> 和会流泪的眼睛<br /> 给我再去相信的勇气<br />
			越过谎言去拥抱你<br /> 每当我找不到存在的意义<br /> 每当我迷失在黑夜里<br /> 夜空中最亮的星<br />
			请指引我靠近你<br /> <br /> 夜空中最亮的星 是否知道<br /> 那曾与我同心的身影 如今在哪里<br /> 夜空中最亮的星
			是否在意<br /> 是等太阳升起 还是意外先来临<br /> 我宁愿所有痛苦都留在心里<br /> 也不愿忘记你的眼睛<br />
			给我再去相信的勇气<br /> 越过谎言去拥抱你<br /> 每当我找不到存在的意义<br /> 每当我迷失在黑夜里<br />
			夜空中最亮的星 请照亮我前行<br /> <br /> 我祈祷拥有一颗透明的心灵<br /> 和会流泪的眼睛<br />
			给我再去相信的勇气<br /> 越过谎言去拥抱你<br /> 每当我找不到存在的意义<br /> 每当我迷失在黑夜里<br />
			夜空中最亮的星<br /> 请照亮我前行<br /> <br /> 夜空中最亮的星 能否听清<br /> 那仰望的人 心底的孤独和叹息<br />
		</div>
		<div id="grade4" style="height: 100%">
			<p>4</p>
			无所谓短暂 无所谓永久<br /> 无所谓快乐 会紧接着伤痛<br /> 无所谓挥霍 无所谓冲动<br /> 只要能够曾经感动<br />
			<br /> 写一句短诗 写一部小说<br /> 只要一秒 精彩就能够隽永<br /> 写一种回忆 无论过多久<br />
			我都能够微笑泪流<br /> 漫长人生原本像是沙漠<br /> 却在你的脚下长出绿洲<br /> 命运结束了沉默<br />
			夜空炸开了花朵<br /> 我们很有默契一起抬起了头<br /> 天空 正绽放无数花火<br /> 短暂美丽的花火<br /> 没有空去想
			明天以后<br /> 如果 爱情是一场花火<br /> 一闪即逝的花火<br /> 我也要去追求<br /> <br /> 什麽是折磨
			什麽是享受<br /> 在爱里折磨 我都会享受<br /> 什麽是付出 什麽是收获<br /> 什麽飞蛾总是扑火<br /> <br />
			谁算是贫穷 谁算是富有<br /> 谁打翻钻石 在夜空挥霍<br /> 谁改变了我 让我终於能<br /> 摆脱平凡的那个我<br />
			<br /> 漫长人生原本像是沙漠<br /> 却在你的脚下长出绿洲<br /> 命运结束了沉默<br /> 夜空炸开了花朵<br />
			我们很有默契一起抬起了头<br /> 天空 正绽放无数花火<br /> 短暂美丽的花火<br /> 没有空去想 明天以后<br /> 如果
			爱情是一场花火<br /> 一闪即逝的花火<br /> 我也要去追求<br /> <br /> 天空 正绽放无数花火<br />
			短暂美丽的花火<br /> 如果 爱情是一场花火<br /> 一闪即逝的花火<br /> 我也要去追求<br />
			我们还有多少的时间能蹉跎<br /> <br /> 我们还有多少的时间能相拥<br /> 还能等多久 还能爱多久<br /> 还能够让花火
			灼热灿烂多久<br /> 我们还有多少的时间能蹉跎<br /> 我们还有多少的时间能相拥<br /> 还能等多久 还能爱多久<br />
			还能够让花火 灼热灿烂多久<br />
		</div>
		
	</div>

	<script type="text/javascript">
		function changeHighlight(i) {
			for (var j = 0; j < 4; j++) {
				if (i != j)
					$("#sideToolbar-item-0-" + j).removeClass("highlight");
			}
			$("#sideToolbar-item-0-" + i).addClass("highlight");
		}
		/*
		 * 监听滚动条，本来不想用jQuery但是发现js里面监听滚动条的事件不好添加，这边就引用了Jquery的$(obj).scroll();这个方法了
		 */
		$(window).scroll(function() {
			//下面这句主要是获取网页的总高度
			var htmlHeight = document.body.scrollHeight;
			//clientHeight是网页在浏览器中的可视高度
			var clientHeight = document.body.clientHeight;
			//scrollTop是页面滚过的高度
			var scrollTop = document.body.scrollTop;

			var gradesHeightArr = [];
			//相对于整个html页面的顶部距离
			gradesHeightArr[0] = $("#grade1").offset().top - scrollTop;
			gradesHeightArr[1] = $("#grade2").offset().top - scrollTop;
			gradesHeightArr[2] = $("#grade3").offset().top - scrollTop;
			gradesHeightArr[3] = $("#grade4").offset().top - scrollTop;
			for (var i = 0; i < 4; i++) {
				console.log(gradesHeightArr[i]);
				if (gradesHeightArr[i] >= 0 && gradesHeightArr[i] < 100)
					changeHighlight(i);
			}
			console.log("**************************");
		})
	</script>
<iframe src="footer.html" frameborder="no" border="0" style="width: 100%;height:60px"></iframe>
</body>
</html>





